<template>
  <div>
    <el-form
      :disabled="disableElement"
      :model="purchaseListFormDatas"
      :rules="rules"
      label-width="150px"
      ref="purchaseListFrom"
      style="width: 70%; margin-left: 15%"
    >
      <el-form-item label="物联卡申请单" prop="SimApplyOrderPDF">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          :loading="loading"
          @click="simApplyOrderPDFDownload"
        >
          <span v-if="!loading">点击下载</span>
          <span v-else>请等待...</span>
        </el-button>
      </el-form-item>
      <el-form-item label="运营商平台" prop="SubOperator">
        <el-input readonly v-model="purchaseListFormDatas.SubOperator" />
      </el-form-item>
      <el-form-item v-if="purchaseListFormDatas.accountList.length > 1" label="账号ID" prop="AccountID">
        <el-select
          style="width: 100%"
          placeholder="请选择账号ID"
          v-model="purchaseListFormDatas.AccountID"
          @change="AccountIDchange"
        >
          <el-option
            v-for="item in purchaseListFormDatas.accountList"
            :key="item.appAccountCode"
            :label="
              item.appAccountCode +
              '(' +
              item.subOperatorName +
              ' ' +
              item.operatorName +
              ' ' +
              item.operatorCode +
              ')'
            "
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="PurchaseListTemplate">
        <el-link
          style="white-space: nowrap; margin: 0px 10px; color: #6a71e6"
          @click="downloadPurchaseExcelTemplate"
          :disabled="disableElement || purchaseLoading"
          >采购清单文件模板(内含申请信息和已分配IP地址)</el-link
        >
      </el-form-item>
      <el-form-item label="采购清单Excel文件" prop="PurchaseListExcel">
        <el-upload
          ref="PurchaseListExcelList"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :on-success="excelUploadSucc"
          :on-remove="excelUploadRemove"
        >
          <el-button size="mini" type="primary" icon="el-icon-upload2"
            >点击上传</el-button
          >
        </el-upload>
        <div style="font-size: 12px">
          温馨提示：请下载采购清单Excel文件模版，补充运营商反馈的ICCID信息后上传。
        </div>
      </el-form-item>

      <el-form-item label="盖章采购清单扫描件" prop="PurchaseListScanCopy">
        <el-upload
          :limit="1"
          accept=".pdf, .jpg, .png"
          :headers="upload.headers"
          :action="upload.url"
          :on-success="scanUploadSucc"
          :on-remove="scanUploadRemove"
        >
          <el-button size="mini" type="primary" icon="el-icon-upload2"
            >点击上传</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item label="物流信息" prop="ShippingInfo">
        <el-input
          placeholder="请填写物流信息(快递公司、快递单号等信息)"
          v-model="purchaseListFormDatas.ShippingInfo"
        />
      </el-form-item>
      <el-form-item label="备注" prop="PurchaseListMemo">
        <el-input
          type="textarea"
          placeholder="请填写备注信息"
          v-model="purchaseListFormDatas.PurchaseListMemo"
        />
      </el-form-item>
      <div
        v-if="showFormBtn"
        style="
          width: 30%;
          margin-left: 35%;
          display: flex;
          justify-content: space-between;
        "
      >
        <el-button type="primary" size="mini" @click="submitForm"
          >提交</el-button
        >
        <el-button size="mini" @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getToken } from "../../../utils/auth";
import downloadutil from "@/api/system/sim/downloadutil";

export default {
  props: [
    "purchaseListFormData",
    "showFormBtn",
    "disableElement",
    "valueHistoryFormData",
  ],
  data() {
    return {
      purchaseLoading:false,
      loading: false,
      purchaseListFormDatas: this.purchaseListFormData,
      valueHistoryFormDatas: this.valueHistoryFormData,
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      rules: {
        ProvinceTelecomApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "blur",
          },
        ],
        AccountID: [
          {
            required: true,
            message: "账号ID不能为空",
            trigger: "blur",
          },
        ],
        PurchaseListExcel: [
          {
            required: true,
            message: "采购清单Excel文件不能为空",
            trigger: "blur",
          },
        ],
        PurchaseListScanCopy: [
          {
            required: true,
            message: "盖章采购清单扫描件不能为空",
            trigger: "blur",
          },
        ],
        ShippingInfo: [
          {
            required: true,
            message: "物流信息不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    console.log(123,this.purchaseListFormDatas);
    this.loading = false;
  },
  methods: {
    AccountIDchange(val) {
      this.purchaseListFormDatas.PurchaseListExcel = "";
      this.$refs.PurchaseListExcelList.clearFiles();
      this.purchaseListFormDatas.SubOperator = val.subOperatorName;
      this.purchaseListFormDatas.AccountID = val.appAccountCode;
    },
    /** 清空表单 */
    resetForm() {
      //请空数据
      this.purchaseListFormDatas = {
        ProvinceTelecomApprovalResult: "",
        ProvinceTelecomApprovalComment: "",
        SimApplyOrderPDF: "",
        SubOperator: this.purchaseListFormDatas.SubOperator,
        AccountID: "",
        PurchaseListExcel: "",
        PurchaseListTemplate: "",
        PurchaseListScanCopy: "",
        ShippingInfo: "",
        PurchaseListMemo: "",
        //AccountID: this.purchaseListFormDatas.AccountID,
        accountList: this.purchaseListFormDatas.accountList,
      };
      this.$refs.purchaseListFrom.clearValidate();
    },
    submitForm() {
      this.$refs.purchaseListFrom.validate((valid) => {
        if (!valid) return false;
        console.log('this.purchaseListFormDatas',this.purchaseListFormDatas)
        // 触发sumit事件
        const params = {
          formType: "PurchaseListFrom",
          formData: this.purchaseListFormDatas,
        };
        this.$emit("submit", params);
        return true;
      });
    },
    simApplyOrderPDFDownload() {
      this.loading = true;
      let parameter = {
        //todo 改了新模板了
        businessKey: this.valueHistoryFormDatas.businessKey,
        applicant: this.valueHistoryFormDatas.applicant,
        applicant_dept: this.valueHistoryFormDatas.applicant_dept,
        applicant_org: this.valueHistoryFormDatas.applicant_org,
        applicant_contact: this.valueHistoryFormDatas.applicant_contact,
        application_business_sys:
          this.valueHistoryFormDatas.application_business_sys,
        apply_amount: this.valueHistoryFormDatas.apply_amount,
        operator: this.valueHistoryFormDatas.operator,
        product: this.valueHistoryFormDatas.product,
        shipping_addr: this.valueHistoryFormDatas.shipping_addr,
        BusinessApprovalResult:
          this.valueHistoryFormDatas.BusinessApprovalResult,
        BusinessApprovalComment:
          this.valueHistoryFormDatas.BusinessApprovalComment,
        CityBusinessApprovalResult:
          this.valueHistoryFormDatas.CityBusinessApprovalResult,
        CityBusinessApprovalComment:
          this.valueHistoryFormDatas.CityBusinessApprovalComment,
        CityTelecomApprovalResult:
          this.valueHistoryFormDatas.CityTelecomApprovalResult,
        ipPool: this.valueHistoryFormDatas.ipPool,
        APNNames: this.valueHistoryFormDatas.APNNames,
        CityTelecomApprovalAssignedIP:
          this.valueHistoryFormDatas.CityTelecomApprovalAssignedIP,
        CityTelecomApprovalComment:
          this.valueHistoryFormDatas.CityTelecomApprovalComment,
        ProvinceTelecomApprovalResult:
          this.valueHistoryFormDatas.ProvinceTelecomApprovalResult,
        ProvinceTelecomApprovalComment:
          this.valueHistoryFormDatas.ProvinceTelecomApprovalComment,
        applicant_date: this.valueHistoryFormDatas.applicant_date,
      };
      let jsonStr = JSON.stringify(parameter);
      let url = "/pdf/download?jsonStr=" + encodeURI(jsonStr);
      downloadutil.getFile(url, { fileName: "SimApplyOrderPDF.pdf" }).then((res) => {
          this.loading = false;
        });
    },
    downloadPurchaseExcelTemplate() {
      this.purchaseLoading = true;
      const message = this.$message(
        {
          type: "warning",
          message:"下载中,请稍等...",
          duration:0,
        }
      );
      let parameter = {
        accountID: this.purchaseListFormData.AccountID,
        assignedIP: this.valueHistoryFormDatas.CityTelecomApprovalAssignedIP,
        currentIpPoolId: this.valueHistoryFormDatas.currentIpPoolId,
        productCode: this.valueHistoryFormDatas.product,
        applyScene: this.valueHistoryFormDatas.application_business_sys,
        applicantOrg: this.valueHistoryFormDatas.applicant_org,
        applyAmount: this.valueHistoryFormDatas.apply_amount,
      };
      let jsonStr = JSON.stringify(parameter);
      let url = "/card/warehousing/export?jsonStr=" + encodeURI(jsonStr);
      downloadutil.getFile(url, { fileName: "simRequestTemplate.xlsx" }).then((res)=>{
        this.purchaseLoading = false;
        message.close();
      });
    },
    excelUploadSucc(file) {
      if (file.code == 200) {
        this.purchaseListFormDatas.PurchaseListExcel = file.newFileName;
        this.$refs.purchaseListFrom.clearValidate();
      } else {
        this.purchaseListFormDatas.PurchaseListExcel = "";
        this.$refs.PurchaseListExcelList.clearFiles();
        this.$modal.msgWarning("ICCID输入不能为空,请检查采购清单文件");
      }
    },
    excelUploadRemove(file) {
      this.purchaseListFormDatas.PurchaseListExcel = "";
    },
    scanUploadSucc(file) {
      this.purchaseListFormDatas.PurchaseListScanCopy = file.newFileName;
      this.$refs.purchaseListFrom.clearValidate();
    },
    scanUploadRemove(file) {
      this.purchaseListFormDatas.PurchaseListScanCopy = "";
    },
  },
};
</script>
